<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>修改头像</title>
	<link rel="stylesheet" href="layui/css/layui.css">
	<script src="layui/layui.js"></script>
</head>
<body>
<div id="app">
	<div class="layui-card">
		<div class="layui-card-header">
			<h1>修改头像</h1>
		</div>
		<div class="layui-card-body">
			<div class="layui-upload">
				<img id="pic" src='images/head/default.png' style="width:160px;height:160px" />
				<button type="button" class="layui-btn" id="browser-pic">
					<i class="layui-icon">&#xe67c;</i>浏览图片
				</button>
				<button type="button" class="layui-btn" id="btn_ok">
					<i class="layui-icon">&#xe67c;</i>确定修改
				</button>
			</div>
		</div>
	</div>
</div>

<script>
	// 第一：使用 layui 组件
	layui.use(function(){
		// 第二：获取组件实例对象
		let upload = layui.upload;
		let $ = layui.jquery ;
		let layer = layui.layer;

		// 从本地存储中获取登录用户信息 - 必须先登录
		let user = JSON.parse(sessionStorage.getItem("userinfo"))
		console.log(user)
		if( user==null ) {
			location.href = "login.html"
			return ;
		}
		$("#pic").prop("src",'../images/head/' + user.image)

		// 第三：使用组件
		let uploadInst = upload.render({
			// 绑定浏览文件元素
			elem: '#browser-pic',

			// 向服务器程序传递参数
			data:{
				username:user.username,
				headImage:user.image
			},

			// 实现上传功能的服务器端程序
			url: 'user/user_head_modify',

			// 设置允许上传的文件类型
			accept: 'file',

			// 绑定提交上传的按钮
			bindAction: '#btn_ok',

			// 设置允许上传的文件后缀
			exts: 'jpg|png|jpeg',

			// 设计允许上传文件的大小，单位：KB
			size: 10 * 1024,

			// 绑定上传控件的字段名，便于服务器获取上传文件
			field: "headImg",

			// 设置不自动上传
			auto: false,

			// 上传成功的回调
			done: function (res) {
				// res参数：服务器响应回来的数据，可以封装为responseData对象
				console.info(res);
				// $("#pic").prop("src","${pageContext.request.contextPath}/upload/tx/"+res.data) ;

				// 上传成功后，隐藏按钮，防止上传多次
				$("#btn_ok").hide();
				// layer.msg('上传成功');
				layer.msg('修改成功，重新登录', { icon: 1 });

				setTimeout(() => {
					top.location.href = 'login.html';
				}, 2000);

			},
			error: function () {			//上传失败的回调
				// 请求异常回调
				// layer.msg('图片上传失败');
				layer.msg('图片上传失败~~', { icon: 5 });
			},
			choose: function (obj) {		//选择文件后的回调
				obj.preview(function (index, file, result) {
					//console.log(index); 	//得到文件索引
					//console.log(file); 	//得到文件对象
					//console.log(result); 	//得到文件base64编码，比如图片

					//显示图片
					$("#pic").prop("src", result);
				});

				//显示提交按钮
				$("#btn_ok").show();
			}
		});
	}) ;
</script>
</body>
</html>